<template>
  <div class="productImage" curpagename="productImage1123234343423423">
    <layoutContent>
      <template #content>
        <div class="title_tip">
          <span class="fail_info" @click="getErrData"
            ><el-icon><Warning /></el-icon>
            {{ $t("goods_archive.look_fail_picture") }}
            <!-- 查看上传失败图片 -->
          </span>

          <el-popover
            placement="bottom"
            :title='$t("merak.operation_guide")'
            :width="400"
            trigger="hover"
           
          >
            <template #reference>
              <span class="tip_info" @click="oprationFun"
                ><el-icon><QuestionFilled /></el-icon>
                <!-- 操作指南 -->
                {{ $t("merak.operation_guide") }}
              </span>
            </template>
            <template #default >
                <span v-html='$t("goods_batchUploads_productMainImage.desc_info")'></span>
            </template>
          </el-popover>
        </div>

        <div class="upload_moudle">
          <!-- 上传列表 -->
          <productFileList
            ref="productFileRef"
            :refname="productFileRef"
            v-bind="uploadDataOne"
            v-model="dfaultFileArr"
            @delLine="delLineFun"
          ></productFileList>
        </div>

        <Transition name="fade" mode="out-in">
          <errorFileList v-if="errInfoBool" :errDataArr="errDataArr" @close="handleClose" />
        </Transition>
      </template>
    </layoutContent>
  </div>
</template>
<script lang="ts" setup>
import { Path } from "@/api/modules/upload.ts";
import { reactive, ref, getCurrentInstance } from "vue";
// Path.batchImgSpuss
import { ElMessage } from "element-plus";
import layoutContent from "@/components/LayoutComponents/index.vue";
import productFileList from "../../a-components/productFileList/index.vue";
import errorFileList from "../../a-components/errorFileList/index.vue";

import { delImagesApi } from "@/api/modules/goodsArchive/batchupload/goodsImmage";

import { successMsg, failMsg, confirmWarningMsg } from "@/utils/messageUtils";
import { ResultEnum } from "@/enums/httpEnum";

const { proxy } = getCurrentInstance();
const productFileRef = ref(null); //组件ref

const uploadDataOne = reactive({
  path: Path.batchImgSpu,
  accept: ".jpg,.jpeg,.png,.gif,.bmp,.webp,.zip", //只允许图片上传
  tipMsg: "，支持jpg、png、webp、zip格式",
  imageType: "squire",
  imageProps: { minWidth: 800, maxWidth: 1000 },
  failBoolShow: true
});

let dfaultFileArr = ref([]); //初始化默认数据

//删除一行
const delLineFun = params => {
  confirmWarningMsg({
    msg: proxy.$t("goods_batchUploads_productMainImage.is_confirm_del"),
    callback: val => {
      console.log(val, "成功confirm还是失败cancel");
      if (val == "confirm") {
        let rows = params.rows;

        delImagesApi({ id: rows.id, source: "spu" }).then(res => {
          console.log(res);
          if (res.code == ResultEnum.SUCCESS) {
            let indexFilter = dfaultFileArr.value.findIndex(fitem => fitem.id == rows.id);
            if (indexFilter > -1) {
              dfaultFileArr.value.splice(indexFilter, 1);
            }
            productFileRef.value.delChangeFile(rows); //清空上次选择
            successMsg("删除成功");
          } else {
            failMsg(res.message);
          }
        });
      }
    }
  });
};

//错误数据
const errInfoBool = ref(false);
const errDataArr = ref([]);
const getErrData = () => {
  let errData = productFileRef.value.getErrUploadData();

  if (errData && errData.length > 0) {
    errDataArr.value = errData;
    errInfoBool.value = true;
    return;
  }
  ElMessage.warning(proxy.$t("goods_batchUploads_productMainImage.no_have_fail_picture"));
};

const handleClose = () => {
  {
    errInfoBool.value = false;
  }
};
</script>
<style lang="scss" scoped>
@import url("./index.scss");
</style>
